<template>
    <div class="invoice-wrap">
        <el-dialog v-model="visible" title="申请发票" width="480px" @close="emits('close')">
            <div class="invoice-container">
                <el-radio-group v-model="tabActive" @change="tabChange">
                    <el-radio-button label="电子普通发票"></el-radio-button>
                    <el-radio-button label="增值税专用电子发票"></el-radio-button>
                </el-radio-group>
                <div class="tips">
                    {{tabActive == '电子普通发票' ? '电子普通发票与纸质发票具有同等法律效力，可支持报销入账。' : '增值税电子专用发票与纸质版具有同等法律效力。'}}
                </div>
                <div class="content">
                    <el-scrollbar>
                        <div class="section-title">发票内容</div>
                        <div class="row">
                            <div class="label">发票内容</div>
                            <div class="val">{{content}}</div>
                        </div>
                        <div class="row" style="margin-bottom:16px">
                            <div class="label">发票金额</div>
                            <div class="val">￥{{fee}}</div>
                        </div>
                        <div v-if="tabActive == '电子普通发票'">
                            
                            <div class="section-title">发票抬头</div>
                            <el-form ref="formRef"
                                     :model="form"
                                     :rules="formRules"
                                     :label-width="80">
                                <el-form-item label="抬头类型" prop="type">
                                    <el-radio-group v-model="form.type">
                                        <el-radio :label="1">企业</el-radio>
                                        <el-radio :label="2">个人</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="发票抬头" prop="invoice_header">
                                    <el-input v-model="form.invoice_header" placeholder="请填写公司名称"></el-input>
                                </el-form-item>
                                <template v-if="form.type == 1">
                                    <el-form-item label="企业税号" prop="unit_tax_no">
                                        <el-input v-model="form.unit_tax_no" placeholder="请填写企业税号"></el-input>
                                    </el-form-item>
                                    <template v-if="isExpand">
                                        <el-form-item label="注册地址" prop="reg_address">
                                            <el-input v-model="form.reg_address" placeholder="选填"></el-input>
                                        </el-form-item>
                                        <el-form-item label="注册电话" prop="reg_tel">
                                            <el-input v-model="form.reg_tel" placeholder="选填"></el-input>
                                        </el-form-item>
                                        <el-form-item label="开户银行" prop="open_bank">
                                            <el-input v-model="form.open_bank" placeholder="选填"></el-input>
                                        </el-form-item>
                                        <el-form-item label="银行账户" prop="bank_account">
                                            <el-input v-model="form.bank_account" placeholder="选填"></el-input>
                                        </el-form-item>
                                    </template>
                                    <div class="expand" @click="isExpand = !isExpand">
                                        <div class="text">{{isExpand ? '收起选填项' : '展开选填项'}}</div>
                                        <el-icon>
                                            <ArrowDown v-if="!isExpand" />
                                            <ArrowUp v-else />
                                        </el-icon>
                                    </div>
                                </template>
                                <div class="section-title">电子邮箱</div>
                                <el-form-item label="银行账户" prop="email">
                                        <el-input v-model="form.email" placeholder="请填写电子邮箱"></el-input>
                                    </el-form-item>
                            </el-form>
                        </div>
                        <div v-else>
                            
                            <div class="section-title">公司信息</div>
                            <el-form ref="formRef"
                                     :model="form2"
                                     :rules="formRules"
                                     :label-width="80">
                                
                                <el-form-item label="发票抬头" prop="invoice_header">
                                    <el-input v-model="form2.invoice_header" disabled placeholder="请填写公司名称"></el-input>
                                </el-form-item>
                                <template v-if="form.type == 1">
                                    <el-form-item label="企业税号" prop="unit_tax_no">
                                        <el-input v-model="form2.unit_tax_no" disabled placeholder="请填写企业税号"></el-input>
                                    </el-form-item>
                                    <template v-if="isExpand">
                                        <el-form-item label="注册地址" prop="reg_address">
                                            <el-input v-model="form2.reg_address" disabled placeholder="选填"></el-input>
                                        </el-form-item>
                                        <el-form-item label="注册电话" prop="reg_tel">
                                            <el-input v-model="form2.reg_tel" disabled placeholder="选填"></el-input>
                                        </el-form-item>
                                        <el-form-item label="开户银行" prop="open_bank">
                                            <el-input v-model="form2.open_bank" disabled placeholder="选填"></el-input>
                                        </el-form-item>
                                        <el-form-item label="银行账户" prop="bank_account">
                                            <el-input v-model="form2.bank_account" disabled placeholder="选填"></el-input>
                                        </el-form-item>
                                    </template>
                                    <div class="expand" @click="isExpand = !isExpand">
                                        <div class="text">{{isExpand ? '收起选填项' : '展开选填项'}}</div>
                                        <el-icon>
                                            <ArrowDown v-if="!isExpand" />
                                            <ArrowUp v-else />
                                        </el-icon>
                                    </div>
                                </template>
                                <div class="section-title">电子邮箱</div>
                                <el-form-item label="银行账户" prop="email">
                                        <el-input v-model="form2.email" placeholder="请填写电子邮箱"></el-input>
                                    </el-form-item>
                            </el-form>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="emits('close')">取 消</el-button>
                    <el-button type="primary" @click="save(formRef)">申请开票</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="viewVisible" title="发票信息" width="480px" @close="emits('viewClose')">
            <div class="invoice-container">
                <div class="content">
                    <el-scrollbar>

                        <div class="row">
                            <div class="label">发票状态</div>
                            <div class="val">{{detail.invoice_status_desc}}</div>
                        </div>
                        <div class="row">
                            <div class="label">发票类型</div>
                            <div class="val">{{detail.invoice_type_desc}}</div>
                        </div>
                        <div class="section-title" style="margin-top:16px">接收信息</div>
                        <div class="row">
                            <div class="label">电子邮箱</div>
                            <div class="val">{{detail.email}}</div>
                        </div>
                        <div class="row">
                            <div class="label">注册电话</div>
                            <div class="val">{{detail.reg_tel}}</div>
                        </div>
                        <div class="section-title" style="margin-top:16px">发票内容</div>
                        <div class="row">
                            <div class="label">发票内容</div>
                            <div class="val">{{detail.content}}</div>
                        </div>
                        <div class="row">
                            <div class="label">发票金额</div>
                            <div class="val">￥{{detail.amount}}</div>
                        </div>
                        <div class="section-title" style="margin-top:16px">发票信息</div>
                        <div class="row">
                            <div class="label">发票抬头</div>
                            <div class="val">{{detail.invoice_header}}</div>
                        </div>
                        <div class="row">
                            <div class="label">注册地址</div>
                            <div class="val">{{detail.reg_address}}</div>
                        </div>
                        <div class="row">
                            <div class="label">开户银行</div>
                            <div class="val">{{detail.open_bank}}</div>
                        </div>
                        <div class="row">
                            <div class="label">银行账户</div>
                            <div class="val">{{detail.bank_account}}</div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted, nextTick } from 'vue'
import {  ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

import { ArrowDown,ArrowUp } from '@element-plus/icons-vue'

import { getInvoiceTitle, getInvoiceDetail, saveInvoice } from 'services/system'


const formRef = ref<FormInstance>()

const visible = ref(false)

const viewVisible = ref(false)

const isExpand = ref(false)

const emits = defineEmits(['close', 'success', 'goInvoice', 'viewClose'])

const props = defineProps<{
    dialogVisible:boolean,
    dialogViewVisible:boolean,
    orderId:number | undefined | null,
    id:number | undefined | null
}>();

const tabActive = ref('电子普通发票')

const fee = ref(0)

const content = ref('')

interface Invoice {
    id?: number | undefined | null,
    type: number,
    invoice_header: string | null,
    unit_tax_no:string | null,
    reg_address:string | null,
    reg_tel: string | null,
    open_bank: string | null,
    bank_account: string | null,
    email:string | null
}

const form = ref<Invoice>({
    id:undefined,
    type:1,
    invoice_header:'',
    unit_tax_no:'',
    reg_address: '',
    reg_tel:'',
    open_bank:'',
    bank_account:'',
    email:''
})

const formRules = reactive<FormRules>({
    type:[{required:true,message:'请选择抬头类型',trigger:'change'}],
    invoice_header:[{required:true,message:'请输入发票抬头'}],
    unit_tax_no:[{required:true,message:'请输入企业税号'}]
})

const form2 = ref({
    id:undefined,
    type:1,
    invoice_header:'',
    unit_tax_no:'',
    reg_address: '',
    reg_tel:'',
    open_bank:'',
    bank_account:'',
    email:''
})

const detail = ref({
    id:0,
    tenant_name:'',
    account:'',
    amount:0,
    invoice_type:0,
    invoice_type_desc:'',
    create_at:'',
    update_at:'',
    invoice_status:0,
    invoice_status_desc:'',
    content:'',
    invoice_header:'',
    unit_tax_no:'',
    reg_address:'',
    reg_tel:'',
    email:'',
    open_bank:'',
    bank_account:''
})

const tabChange = (val:string) => {
    console.log(val)
    if (val === '增值税专用电子发票' && form2.value.invoice_header === null) {
        tabActive.value = '电子普通发票'
        ElMessageBox.confirm('无增值税专票抬头信息或信息审核中，暂不可申请增值税专用发票。（如需添加发票抬头信息，请至「个人主页-发票抬头管理」）', '提示', {
            confirmButtonText:'添加专票抬头',
            cancelButtonText: '我知道了',
            closeOnClickModal:false
        }).then(() => {
            emits('goInvoice')
        }).catch(() => {

        })
    }
}

const getInvoiceTitleInfo = () => {
    let {orderId} = props
    if (orderId) {
        getInvoiceTitle({
            purchase_id:orderId 
        }).then(res => {
            fee.value = res.amount
            content.value = res.content
            form2.value.invoice_header = res.invoice_header
        })
    }
    
}

const getDetail = () => {
    if (props.id) {
        getInvoiceDetail({
            id:props.id
        }).then(res => {
            detail.value = res
        })
    }
    
}

const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            let data = form.value
            saveInvoice({
                id: props.id || 0,
                purchase_id: props.orderId || 0,
                content: content.value,
                amount:fee.value.toString(),
                invoice_type:data.type,
                invoice_header:data.invoice_header || '',
                unit_tax_no:data.unit_tax_no || '',
                reg_address: data.reg_address || '',
                reg_tel: data.reg_tel || '',
                open_bank: data.open_bank || '',
                bank_account: data.bank_account || '',
                email: data.email || ''
            })

            
        } else {
            console.log('error submit', fields)
        }
    }) 
}


watch(() => props.dialogVisible, async (val) => {
    visible.value = val
    if (visible.value === true) {
        await nextTick()
        
    }
},{
    immediate:true
})

watch(() => props.dialogViewVisible, async (val) => {
    viewVisible.value = val
    if (viewVisible.value === true) {
        getDetail()
        await nextTick()
        
    }
},{
    immediate:true
})

watch(() => props.orderId, async (val) => {
    if (val) {
        getInvoiceTitleInfo()
    }
},{
    immediate:true
})

onMounted(() => {
})
</script>
<style lang="scss">
.invoice-wrap{
    .invoice-container{
        width:100%;
        height:424px;
        display: flex;
        flex-direction: column;
        
        .el-radio-group{
            display: flex;
            width: 100%;

            .el-radio-button{
                flex: 1;
                width: 0;

                .el-radio-button__inner{
                    width: 100%;
                }
            }
        }

        .tips{
            margin-top: 8px;
            height: 36px;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: #A8ABB2;
            line-height: 20px;
        }

        .content{
            flex: 1;
            height: 0;

            .section-title{
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                font-size: 14px;
                font-weight: 500;
                color: #A8ABB2;

            }

            .row{
                height: 32px;
                width: 100%;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #303133;

                .label{
                    width: 80px;
                }

                .val{
                    font-weight: 500;

                }
            }
            
            .expand{
                width: 100%;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;
                color:#A8ABB2;
                cursor: pointer;
            }
        }
    }
}
</style>